<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>族谱树-首页</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <div class="tree_index">
        <div class="tree_header">
            <div class="pull-left text-center col-md-8 col-xs-12">
                <ul class="list-inline">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">新闻资讯</a></li>
                    <li><a href="#">家谱</a></li>
                    <li><a href="#">记录</a></li>
                    <li><a href="#">广场</a></li>
                    <li><a href="#">百家姓</a></li>
                </ul>
            </div>
            <div class="pull-right  col-md-4 hidden-sm hidden-xs">
                <div class="user_box">
                    <div class="user">
                        <i class="fa fa-user m-r-xs"></i>杨薇
                    </div>
                    <ul class="drop_info">
                        <li><a href="#" class="active">个人设置</a></li>
                        <li><a href="#">消息通知</a></li>
                        <li><a href="#">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="location row">
            <div class="pull-left col-md-6 col-xs-12">
                <span class="f16"><i class="fa fa-bookmark"></i> 杨薇的家族谱</span> &nbsp;&nbsp;
                共186人&nbsp;&nbsp; 显示132人&nbsp;&nbsp;
                <span class="search_group">
                    <input type="text" placeholder="搜索姓名">
                    <i class="fa fa-search"></i>
                </span>
            </div>
            <div class="pull-right col-md-6 text-right hidden-sm hidden-xs">
                <ul class="list-inline">
                    <li><a href="" class="text_theme"><i class="fa fa-sitemap"></i> 族谱树</a></li>
                    <li><a href=""></a><i class="fa fa-bullseye"></i> 阴阳图</li>
                    <li><a href=""></a><i class="fa fa-clipboard"></i> 纸谱预览</li>
                    <li><a href=""></a><i class="fa fa-arrows"></i> 全屏显示</li>
                    <li><a href=""></a><i class="fa fa-font"></i> 疑难字库</li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="profile_box m-t m-r">
                <div class="media">
                    <a class="f16 pack"><i class="fa fa-angle-left"></i></a>
                    <div class="media-left">
                        <a href="#"><img src="images/head01.jpg" alt=""></a>
                    </div>
                    <div class="media-body  f12">
                        <span class="f16 fwb m-r">烊微微</span><i class="fa fa-pencil-square-o f14"></i>
                        <p>简介：没注册，显示邀请按钮</p>
                        <p class="m-t"><a href=""><button class="btn_xs btn_theme">邀请</button></a></p>
                    </div>
                </div>
                <div class="profile_content">
                    <div class="tab_nav tab_nav_m">
                        <ul class="nav nav-tabs">
                            <li role="presentation">
                                <a href="#">主页</a>
                            </li>
                            <li role="presentation">
                                <a href="#">资料</a>
                            </li>
                            <li role="presentation">
                                <a href="#">族谱</a>
                            </li>
                            <li role="presentation"  class="active">
                                <a href="#">记录</a>
                            </li>
                        </ul>
                    </div>
                    <div class="record">
                        <div class="col-md-12">
                            <ul>
                                <li class="m-t">
                                    <div class="media">
                                        <div class="media-left">
                                            <img src="images/demo01.jpg" alt="" width="80">
                                        </div>
                                        <div class="media-body f12">
                                            <h4 class="text_oneline f14">记录标题唐卡大师</h4>
                                            <p class="twoline">“老九门”是什么？如果你的回答是“语数外政史地理化生”，那你已经落伍了，含着“金IP”出生的《老九门》</p>
                                            <p class="text_gray m-t">2小时前</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="m-t">
                                    <div class="media">
                                        <div class="media-left">
                                            <img src="images/demo01.jpg" alt="" width="80">
                                        </div>
                                        <div class="media-body f12">
                                            <h4 class="text_oneline f14">记录标题唐卡大师</h4>
                                            <p class="twoline">“老九门”是什么？如果你的回答是“语数外政史地理化生”，那你已经落伍了，含着“金IP”出生的《老九门》</p>
                                            <p class="text_gray m-t">2小时前</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="profile_box m-t m-r">
                <div class="media">
                    <a class="f16 pack"><i class="fa fa-angle-left"></i></a>
                    <div class="media-left">
                        <a href="#"><img src="images/head01.jpg" alt=""></a>
                    </div>
                    <div class="media-body  f12">
                        <span class="f16 fwb m-r">烊微微</span><i class="fa fa-pencil-square-o f14"></i>
                        <p>简介：没注册，显示邀请按钮</p>
                        <p class="m-t"><a href=""><button class="btn_xs btn_theme">邀请</button></a></p>
                    </div>
                </div>
                <div class="profile_content">
                    <div class="tab_nav tab_nav_m">
                        <ul class="nav nav-tabs">
                            <li role="presentation" class="active">
                                <a href="#">主页</a>
                            </li>
                            <li role="presentation">
                                <a href="#">资料</a>
                            </li>
                            <li role="presentation">
                                <a href="#">族谱</a>
                            </li>
                            <li role="presentation" >
                                <a href="#">记录</a>
                            </li>
                        </ul>
                    </div>
                    <div class="homepage">
                        <div class="col-md-12">
                            <ul>
                                <li class="intercept_date">
                                    <div class="pull-left"><a href="#">创建了长沙杨氏族谱</a></div>
                                    <div class="pull-right text_gray">6月21日</div>
                                </li>
                                <li class="intercept_date">
                                    <div class="pull-left"><a href="#">创建了长沙杨氏族谱</a></div>
                                    <div class="pull-right text_gray">6月21日</div>
                                </li>
                                <li class="intercept_date">
                                    <div class="pull-left"><a href="#">创建了长沙杨氏族谱</a></div>
                                    <div class="pull-right text_gray">6月21日</div>
                                </li>
                                <li class="intercept_date">
                                    <div class="pull-left"><a href="#">创建了长沙杨氏族谱</a></div>
                                    <div class="pull-right text_gray">6月21日</div>
                                </li>
                                <li class="intercept_date">
                                    <div class="pull-left"><a href="#">创建了长沙杨氏族谱</a></div>
                                    <div class="pull-right text_gray">6月21日</div>
                                </li>
                                <li class="intercept_date">
                                    <div class="pull-left"><a href="#">创建了长沙杨氏族谱</a></div>
                                    <div class="pull-right text_gray">6月21日</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="profile_box m-t m-r">
                <div class="media">
                    <a class="f16 pack"><i class="fa fa-angle-left"></i></a>
                    <div class="media-left">
                        <a href="#"><img src="images/head01.jpg" alt=""></a>
                    </div>
                    <div class="media-body  f12">
                        <span class="f16 fwb m-r">烊微微</span><i class="fa fa-pencil-square-o f14"></i>
                        <p>简介：没注册，显示邀请按钮</p>
                        <p class="m-t"><a href=""><button class="btn_xs btn_theme">邀请</button></a></p>
                    </div>
                </div>
                <div class="profile_content">
                    <div class="tab_nav tab_nav_m">
                        <ul class="nav nav-tabs">
                            <li role="presentation">
                                <a href="#">主页</a>
                            </li>
                            <li role="presentation" class="active">
                                <a href="#">资料</a>
                            </li>
                            <li role="presentation">
                                <a href="#">族谱</a>
                            </li>
                            <li role="presentation" >
                                <a href="#">记录</a>
                            </li>
                        </ul>
                    </div>
                    <div class="data">
                        <div class="col-md-12">
                            <p>手机：1839839480</p>
                            <p>生日：1985-06-28</p>
                            <p class="fwb">工作经历</p>
                            <div>
                                <div class="clearfix">
                                    <div class="pull-left text_oneline">湖南族谱网络科技有限公司</div>
                                    <div class="pull-right">2001-2006</div>
                                </div>
                            </div>
                            <p class="fwb">教育经历</p>
                            <div>
                                <div class="clearfix">
                                    <div class="pull-left text_oneline">湖南大学</div>
                                    <div class="pull-right">大学</div>
                                </div>
                                <div class="clearfix">
                                    <div class="pull-left text_oneline">科院大学</div>
                                    <div class="pull-right">大学</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="profile_box m-t m-r">
                <div class="media">
                    <a class="f16 pack"><i class="fa fa-angle-left"></i></a>
                    <div class="media-left">
                        <a href="#"><img src="images/head01.jpg" alt=""></a>
                    </div>
                    <div class="media-body  f12">
                        <span class="f16 fwb m-r">烊微微</span><i class="fa fa-pencil-square-o f14"></i>
                        <p>简介：没注册，显示邀请按钮</p>
                        <p class="m-t"><a href=""><button class="btn_xs btn_theme">邀请</button></a></p>
                    </div>
                </div>
                <div class="profile_content">
                    <div class="tab_nav tab_nav_m">
                        <ul class="nav nav-tabs">
                            <li role="presentation">
                                <a href="#">主页</a>
                            </li>
                            <li role="presentation">
                                <a href="#">资料</a>
                            </li>
                            <li role="presentation" class="active">
                                <a href="#">族谱</a>
                            </li>
                            <li role="presentation" >
                                <a href="#">记录</a>
                            </li>
                        </ul>
                    </div>
                    <div class="genealogy">
                        <div class="col-md-6 col-xs-6 zp">
                            <img src="images/4.jpg" alt="" class="img-responsive"/>
                            <div class="title">
                                长沙样式族谱
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-6 zp">
                            <img src="images/4.jpg" alt="" class="img-responsive"/>
                            <div class="title">
                                长沙样式族谱
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="option_box m-t m-r">
                <div class="header">
                    <div class="pull-left">邀请亲人(没手机号)</div>
                    <div class="pull-right  f16"><a href="#"><i class="fa fa-close text_gray"></i></a></div>
                </div>
                <div class="option_content">
                    <div class="form-group">
                        <input type="text" placeholder="对方手机号（短信免费）">
                        <button class="btn_theme">短信邀请</button>
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="http://www.zupu.cn/idena">
                        <button class="btn_theme">复制</button>
                    </div>
                    <p class="f12">邀请链接已经复制，直接粘贴发送邀请至对方QQ</p>
                    <div class="share">
                        <div class="media">
                            <div class="media-left">
                                <img src="images/ewm.png" alt="" width="80">
                            </div>
                            <div class="media-body">
                                您可以用微信扫描左边二维码，直接发送邀请给微信好友
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="option_box m-t m-r">
                <div class="header">
                    <div class="pull-left">邀请亲人(有手机号)</div>
                    <div class="pull-right  f16"><a href="#"><i class="fa fa-close text_gray"></i></a></div>
                </div>
                <div class="option_content">
                    <div class="m-b clearfix">
                        <div class="pull-left text-success m-r p-t-xs">
                            <i class="fa fa-check f22"></i>
                        </div>
                        <div class="pull-left">
                            <p>已将邀请信息通过短信送达(免费)</p>
                            <p><span class="text_theme">1894389430</span>&nbsp;&nbsp;<a href="#">修改</a></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="http://www.zupu.cn/idena">
                        <button class="btn_theme">复制</button>
                    </div>
                    <p class="f12">邀请链接已经复制，直接粘贴发送邀请至对方QQ</p>
                    <div class="share">
                        <div class="media">
                            <div class="media-left">
                                <img src="images/ewm.png" alt="" width="80">
                            </div>
                            <div class="media-body">
                                您可以用微信扫描左边二维码，直接发送邀请给微信好友
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="option_box m-t m-r">
                <div class="header">
                    <div class="pull-left">填写资料</div>
                    <div class="pull-right  f16"><a href="#"><i class="fa fa-close text_gray"></i></a></div>
                </div>
                <div class="option_content">
                    <div class="media">
                        <div class="media-left">
                            <img src="images/default.png" alt="" width="100">
                        </div>
                        <div class="media-body">
                            <input type="text" placeholder="姓名（必填）">
                            <span class="text-danger">请填写您的姓名</span>
                            <input type="text" placeholder="手机号码（必填）">
                        </div>
                    </div>
                    <div class="datum">
                        <div class="title fwb">
                            <div class="pull-left">个人资料</div>
                            <div class="pull-right text_theme"><i class="fa fa-angle-down"></i></div>
                        </div>
                        <div class="form-group m-t">
                            <label>出生日期</label>
                            <div class="row">
                                <div class="col-md-6  col-xs-6">
                                    <input type="text" placeholder="1985">
                                </div>
                                <div class="col-md-6  col-xs-6">
                                    <input type="text" placeholder="MM-DD">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="clearfix">
                                <div class="pull-left">工作经历</div>
                                <div class="pull-right"><a href="#">+ 添加</a></div>
                            </div>
                            <div class="row p-t">
                                <div class="col-md-5  col-xs-5 pr0"><input type="text" placeholder="2001"></div>
                                <div class="col-md-2  col-xs-2 p-t-xs text-center">至</div>
                                <div class="col-md-5  col-xs-5 pl0"><input type="text" placeholder="2006"></div>
                                <div class="col-md-12  col-xs-12 m-t-xs"><input type="text" placeholder="工作单位"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="clearfix">
                                <div class="pull-left">教育经历</div>
                                <div class="pull-right"><a href="#">+ 添加</a></div>
                            </div>
                            <div class="row p-t">
                                <div class="col-md-3 col-xs-3">
                                    <select name="" id="">
                                        <option value="">大学</option>
                                        <option value="">高中</option>
                                    </select>
                                </div>
                                <div class="col-md-9  col-xs-9"><input type="text" placeholder="学校"></div>
                            </div>
                            <button class="btn_theme m-t">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>